<template>
	<view class="list">
		<uni-row :width="nvueWidth" :gutter="25">
			<!-- #ifdef MP-WEIXIN -->
			<uni-col :span="12">
				<template v-for="(item,index) in listLeft">
					<view :key="index" class="list-con" v-if="item.type == 1"
						@click="goTo(`../classDetails/${item.type == 1?'classDetails':'video'}?id=${item.id}`)">
						<view class="list-img" v-if="item.image">
							<image class="image" mode="widthFix" :src="imgUrl + item.image"></image>
							<text class="img-icon">精品课堂</text>
						</view>
						<view class="list-img" v-else>
							<image class="image" src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/none.png"
								mode="widthFix">
							</image>
							<text class="img-icon">精品课堂</text>
						</view>
						<text class="list-text">{{item.title}}</text>
						<view class="uni-flex list-info">
							<view class="author">
								<image
									src="https://staticfile-yj.obs.myhuaweicloud.com/%E5%86%9C%E5%8F%8B%E5%9C%88.png">
								</image><text>{{item.expertName}}</text>
							</view>
							<view class="see"><uni-icons type="eye" color="#9498A0"
									size="14"></uni-icons><text>{{item.browseNum}}</text></view>
						</view>
					</view>
				</template>
			</uni-col>
			<uni-col :span="12">
				<template v-for="(item,index) in listRight">
					<view :key="index" class="list-con" v-if="item.type == 1"
						@click="goTo(`../classDetails/${item.type == 1?'classDetails':'video'}?id=${item.id}`)">
						<view class="list-img" v-if="item.image">
							<image class="image" mode="widthFix" :src="imgUrl + item.image"></image>
							<text class="img-icon">精品课堂</text>
						</view>
						<view class="list-img" v-else>
							<image class="image" src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/none.png"
								mode="widthFix">
							</image>
							<text class="img-icon">精品课堂</text>
						</view>
						<text class="list-text">{{item.title}}</text>
						<view class="uni-flex list-info">
							<view class="author">
								<image
									src="https://staticfile-yj.obs.myhuaweicloud.com/%E5%86%9C%E5%8F%8B%E5%9C%88.png">
								</image><text>{{item.expertName}}</text>
							</view>
							<view class="see"><uni-icons type="eye" color="#9498A0"
									size="14"></uni-icons><text>{{item.browseNum}}</text></view>
						</view>
					</view>
				</template>
			</uni-col>
			<!-- <uni-col :span="12">
				<view class="list-con"  @click="goTo('../classDetails/classDetails')">
					<view class="list-img">
						<image class="image" mode="widthFix" src="https://staticfile-yj.obs.myhuaweicloud.com/arcimg/list2.png"></image>
						<text class="img-icon">精品课堂</text>
					</view>
					<text class="list-text">渔场规划工艺设计高级综合班</text>
					<view class="uni-flex list-info">
						<view class="author">
							<image src="https://staticfile-yj.obs.myhuaweicloud.com/arcimg/list2.png"></image><text>李明春</text>
						</view>
						<view class="see"><uni-icons type="eye" color="#9498A0"
								size="14"></uni-icons><text>867</text></view>
					</view>
				</view>
				<view class="list-con" @click="goTo('../classDetails/classDetails')">
					<view class="list-img">
						<image class="image" mode="widthFix" src="https://staticfile-yj.obs.myhuaweicloud.com/arcimg/list2.png"></image>
						<text class="img-icon">精品课堂</text>
					</view>
					<text class="list-text">渔场规划工艺设计高级综合班</text>
					<view class="uni-flex list-info">
						<view class="author">
							<image mode="widthFix" src="https://staticfile-yj.obs.myhuaweicloud.com/arcimg/list2.png"></image><text>李明春</text>
						</view>
						<view class="see"><uni-icons type="eye" color="#9498A0"
								size="14"></uni-icons><text>867</text></view>
					</view>
				</view>
			</uni-col> -->
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<uni-col :span="12">
				<view v-for="(item,index) in listLeft" :key="index" class="list-con"
					@click="goTo(`../classDetails/${item.type == 1?'classDetails':'video'}?id=${item.id}`)">
					<view class="list-img" v-if="item.image">
						<image class="image" mode="widthFix" :src="imgUrl + item.image"></image>
						<text class="img-icon">精品课堂</text>
					</view>
					<view class="list-img" v-else>
						<image class="image" src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/none.png"
							mode="widthFix">
						</image>
						<text class="img-icon">精品课堂</text>
					</view>
					<text class="list-text">{{item.title}}</text>
					<view class="uni-flex list-info">
						<view class="author">
							<image src="https://staticfile-yj.obs.myhuaweicloud.com/%E5%86%9C%E5%8F%8B%E5%9C%88.png">
							</image><text>{{item.expertName}}</text>
						</view>
						<view class="see"><uni-icons type="eye" color="#9498A0"
								size="14"></uni-icons><text>{{item.browseNum}}</text></view>
					</view>
				</view>
			</uni-col>
			<uni-col :span="12">
				<view v-for="(item,index) in listRight" :key="index" class="list-con"
					@click="goTo(`../classDetails/${item.type == 1?'classDetails':'video'}?id=${item.id}`)">
					<view class="list-img" v-if="item.image">
						<image class="image" mode="widthFix" :src="imgUrl + item.image"></image>
						<text class="img-icon">精品课堂</text>
					</view>
					<view class="list-img" v-else>
						<image class="image" src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/none.png"
							mode="widthFix">
						</image>
						<text class="img-icon">精品课堂</text>
					</view>
					<text class="list-text">{{item.title}}</text>
					<view class="uni-flex list-info">
						<view class="author">
							<image src="https://staticfile-yj.obs.myhuaweicloud.com/%E5%86%9C%E5%8F%8B%E5%9C%88.png">
							</image><text>{{item.expertName}}</text>
						</view>
						<view class="see"><uni-icons type="eye" color="#9498A0"
								size="14"></uni-icons><text>{{item.browseNum}}</text></view>
					</view>
				</view>
			</uni-col>
			<!-- #endif -->
		</uni-row>

	</view>
</template>

<script>
	import {
		baseurl,
		pageKnowledgeCourse
	} from "@/api/user.js";
	let imgUrl = baseurl + "/nb-as/1.0.1/FileService/previewFile?fileId="
	export default {
		data() {
			return {
				nvueWidth: 730,
				list: [],
				page: 1,
				maxpage: 0,
				showLoadMore: false,
				imgUrl,
				listLeft: [],
				listRight: [],
			};
		},
		onLoad() {
			this.initData();
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.initData();
		},
		onReachBottom() {
			console.log("onReachBottom");
			console.log("page", this.page, this.maxpage)
			if (this.page == this.maxpage) {
				this.showLoadMore = false;
				return
			}
			this.showLoadMore = true;
			this.page++;
			this.pageKnowledgeCourse({ //参数
				"condition": null,
				"pageNum": this.page,
				"pageSize": 10
			});
		},
		methods: {
			async pageKnowledgeCourse(options) {
				const res = await pageKnowledgeCourse(options)
				console.log(res);
				this.maxpage = res.returnObj.navigateLastPage;
				let tempArr = res.returnObj.list;
				tempArr.forEach((item, index) => {
					if (index % 2 != 0) {
						this.listRight.push(item)
					} else {
						this.listLeft.push(item)
					}
				})
				this.showLoadMore = false;
			},
			initData() {
				this.page = 1;
				this.listLeft = [];
				this.listRight = [];
				this.showLoadMore = true;
				this.pageKnowledgeCourse({ //参数
					"condition": null,
					"pageNum": this.page,
					"pageSize": 10
				});
				uni.stopPullDownRefresh();
			},
			goTo(e) {
				var url = e;
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss">
	.list {
		padding: 15px 30rpx;
	}

	.list-con {
		width: 100%;
		padding: 0px;
		margin-bottom: 15px;
		background-color: #ffffff;
		border-radius: 8px;
	}

	.list-img {
		position: relative;
	}

	.list-img .img-icon {
		position: absolute;
		left: 0;
		top: 0;
		display: inline-block;
		width: 128rpx;
		height: 48rpx;
		line-height: 48rpx;
		font-size: 24rpx;
		text-align: center;
		color: #ffffff;
		background-image: url('https://staticfile-yj.obs.myhuaweicloud.com/tag-1.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.list-img .image {
		width: 100%;
		border-radius: 8px 8px 0px 0px;
	}


	.list-text {
		font-size: 28rpx;
		color: #283241;
		line-height: 22px;
		height: 44px;
		padding: 0 10rpx;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>